<template>
  <div
    class="relative w-full max-w-md mx-auto px-6 py-8 mt-8 rounded-2xl shadow-md transform transition-transform duration-300 bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 hover:scale-105 hover:shadow-2xl hover:bg-gradient-to-r hover:from-indigo-200 hover:to-sky-200 dark:hover:from-gray-700 dark:hover:to-gray-600"
  >
    <div
      class="flex items-center justify-start mb-6 text-xl font-bold text-gray-800 dark:text-gray-100"
    >
      <div v-if="prefixIcon" class="flex items-center">
        <Icon
          :name="prefixIcon"
          :color="color"
          :width="size"
          :height="size"
          :class="{
            'mr-2': true,
            'text-lg': true,
            'text-gray-600': true,
            'dark:text-gray-400': true,
            shake: true // 添加震动动画
          }"
        />
      </div>
      <span>{{ title }}</span>
      <div v-if="suffixIcon" class="text-gray-600 dark:text-gray-400">
        <Icon :name="suffixIcon" :color="color" :width="size" :height="size" />
      </div>
    </div>

    <div class="card-body text-gray-600 dark:text-gray-400">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

defineProps<{
  title: string
  prefixIcon?: string
  suffixIcon?: string
  isScale?: boolean
  isRotate?: boolean
  color?: string
  size?: string
}>()
</script>

<style scoped>
.card-body {
  line-height: 1.6;
}
/* 震动动画效果 */
@keyframes shake {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  75% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

.shake {
  animation: shake 1s ease-in-out infinite;
}
</style>
